<template>
    <div class="position">
        <div class="position-content">
            <div class="left">
                <a class="bread" href="/home">
                    <span>首 页</span>
                </a>
                <span>
                    <slot></slot>
                </span>
            </div>
            <div class="right">
                
            </div>
        </div>
    </div>
</template>

<style scoped>
.position {
    height: 48px;
    background-image: url('@/assets/postionbg.gif');
    /* background-size: cover; */
    /* background-repeat: no-repeat; */
    background-position: center center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.position-content {
    display: flex;
    width: 945px;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 22px;
    background-image: url('@/assets/postionl.gif');
    background-repeat: no-repeat;
    background-position: center left;
}

.position-content .left {
    display: flex;
    align-items: center;
}

.position-content .right {
    display: flex;
    align-items: center;
}

.bread {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 12px;
    color: #E68340;
}

.bread>span {
    padding-right: 10px;
    background-image: url('@/assets/postij.gif');
    background-repeat: no-repeat;
    background-position: center right;
}

.left>span {
    margin-left: 5px;
    color: #FFE179;
    font-size: 12px;
}
</style>